<h3>The Blockchain</h3>

<hr>

<div *ngIf="performedTransactions.length == 0 && systemTransactions.length == 0">
  <h4>No transactions are made yet</h4>
</div>

<!-- <div *ngIf="_performedTransactions.length > 0"> -->
<!-- <div class="table">
  <h4>Performed Transactions:</h4>
  <mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="transactionType">
      <mat-header-cell *matHeaderCellDef> Transaction Type </mat-header-cell>
      <mat-cell *matCellDef="let transaction"> {{ transaction.transactionType }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="transactionId">
      <mat-header-cell *matHeaderCellDef> Transaction Id </mat-header-cell>
      <mat-cell *matCellDef="let transaction"> {{ transaction.transactionId }} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div> -->

<!-- <div *ngIf="_systemTransactions.length > 0" > -->
<div>
  <!-- <h4>System Transactions:</h4> -->
  <mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="transactionType">
      <mat-header-cell *matHeaderCellDef> Transaction Type </mat-header-cell>
      <mat-cell *matCellDef="let transaction"> {{ transaction.transactionType }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="transactionId">
      <mat-header-cell *matHeaderCellDef> Transaction Id </mat-header-cell>
      <mat-cell *matCellDef="let transaction"> {{ transaction.transactionId }} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-paginator #paginator
  [pageSize]="15">
  </mat-paginator>
</div>
